<script setup>
import { computed, ref ,watch} from 'vue';
import { Cityair, Cityairindex, CityNow } from '../api/weatherAPI';
import { useCityStore } from '../stores/cityStore'
import { initBasicLineChart } from "../util/echarts";
// import { initBasicBar } from "../util/echarts1";
// import { QWeatherIcon } from 'qweather-icons';
import 'qweather-icons/font/qweather-icons.css'
import dayjs from 'dayjs';
const nowText=ref([]);
const nowIcon=ref([]);
const nowTemp=ref([]);
const nowWindDir=ref([]);
const nowHumidity=ref([]);
const nowUpdateTime=ref('');
const nowVis=ref([]);
const nowaqi=ref([]);
const nowData=ref([]);
const nowzi=ref({});

const cityStore = useCityStore();
watch(
    //[必选]监听的数据源
    () => cityStore.location,
    //【必选】回调函数，当数据源有变化时，需要做的事情
    () => {
        const locationId = cityStore.location?.id;
        
        if (locationId) {
            getData(locationId);
        }
    },
    { immediate: true }
);
   
 async function getData(locationID) {
    const res = await CityNow(locationID);
    const response = await Cityair(locationID);
    const airindex=await  Cityairindex(locationID,5)
    nowzi.value=airindex.daily[0].category;
    nowData.value=res.now;
   
nowaqi.value=response.now.aqi;
nowText.value=res.now.text;
nowTemp.value=res.now.temp;
// iconFileName.value = res.now.icon+".svg"; 
nowIcon.value=res.now.icon;
nowWindDir.value=res.now.windDir;
nowHumidity.value=res.now.humidity;
nowUpdateTime.value=dayjs(res.updateTime ).format('YYYY-MM-DD HH:mm');
nowVis.value=res.now.vis;
// nowTemp.value=res.now.temp;
   
    const weatherIcon='../../QWeather-Icons-1.6.0/icons/'+nowIcon.value+'.svg';

myIcon.src=weatherIcon;
}

const airTest = computed(() => {
    let color;
    if (nowaqi.value <= 50) {
        color = '#bada55'; // 优的背景颜色
        return { background:'#bada55', text: '优' };
    } else if (nowaqi.value <= 100) {
        color = '#dabf55'; // 良的背景颜色
        return { background: '#dabf55', text: '良' };
    } else if (nowaqi.value <= 150) {
        color = '#e09747'; // 轻度污染的背景颜色
        return { background: '#e09747', text: '轻度污染' };
    } else if (nowaqi.value <= 200) {
        color = '#e08947'; // 中度污染的背景颜色
        return { background: '#e08947', text: '中度污染' };
    } else if (nowaqi.value <= 300) {
        color = '#e06d47'; // 重度污染的背景颜色
        return { background: '#e06d47', text: '重度污染' };
    } else if (nowaqi.value <= 500) {
        color = '#e04747'; // 严重污染的背景颜色
        return { background: '#e04747', text: '严重污染' };
    } else {
        color = '#000000'; // 爆表的背景颜色
        return { background: '#000000', text: '爆表' };
    }
});
// const backendData = {
//       dates: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
//       values: [120, 200, 150, 80, 70, 110, 130],
//       icons: [
//         'https://picsum.photos/id/20/50/50', // 晴天
//         'https://picsum.photos/id/21/50/50', // 多云
//         'https://picsum.photos/id/22/50/50', // 小雨
//         'https://picsum.photos/id/23/50/50', // 中雨
//         'https://picsum.photos/id/24/50/50', // 大雨
//         'https://picsum.photos/id/25/50/50', // 雷阵雨
//         'https://picsum.photos/id/26/50/50' // 雾
//       ]
//     };
// if (backendData) {
//         initBasicBar(backendData);
//     }

    // const weatherIcon = document.getElementById('weatherIcon');
    // weatherIcon.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', iconFileName + "#icon");
</script>

<template>
    <div id="weather">
        <!-- <ul>
            <li>天气: {{ nowText }}
                <img id="myIcon" src='' alt="QWeather Icons" width="32" height="32">
                <i :class="`qi-${nowIcon}`"></i>
            </li>     
           <li> 温度：{{ nowTemp }}℃</li>     
           <li> 风向：{{ nowWindDir }}</li>     
           <li>湿度：{{ nowHumidity }}%</li>     
        </ul> -->
          
        <div class="hreade">
      <span class="city">{{ cityStore.location.name }}</span>
      <span class="time">{{ nowUpdateTime }}</span>
    </div>
    <!-- 空气质量 -->
    <div class="aqi" >
      <span class="apia" :style="{backgroundColor:airTest.background}">AQI   {{airTest.text}}</span>
       </div>
    <!-- 天气状况和描述 -->
    <div class="condition">
       <img id="myIcon" src='' alt="QWeather Icons" width="64" height="64">
     <div class="tempDesc">
         <p class="temp">{{ nowTemp }} °</p>
        <!-- <br /> -->
        <p class="desc">{{ nowText }}</p>
      </div>
     
    </div>
    <div class="desc-text"></div>
    <!-- 风力和湿度 -->
    <div class="wind-humidity">
      <div class="humidity">
        <span>{{ nowVis }} 级</span><br />
        <span>{{ nowWindDir }}</span>
      </div>
      <div class="humidity">
        <span>{{ nowHumidity }} %</span><br />
        <span>相对湿度</span>
      </div>
      <div class="humidity">
        <span>{{ nowzi }} </span><br />
        <span>紫外线</span>
      </div>
      <div class="humidity">
        <span>{{ nowData.feelsLike }}  °</span><br />
        <span>体感温度</span>
      </div>
      <div class="humidity">
        <span>{{ nowData.vis }}km</span><br />
        <span>能见度</span>
      </div>
      <div class="humidity">
        <span>{{nowData.precip }}mm</span><br />
        <span>降水量</span>
      </div>
      <div class="humidity">
        <span>{{ nowData.pressure }}hPa</span><br />
        <span>大气压</span>
      </div>
    </div>
    </div>
</template>

<style scoped>
#weather{
background-image:url(../../pothos/585740-air-background.jpg);
width:1200px ;
height: 400px;
background-color: rgba(200, 200, 200, 0.5); /* 这里假设背景色为浅灰色，最后一个参数0.5即透明度 */
    opacity: 0.5;    /* 整体元素设置透明度为50% */
    border-radius: 10px;
    padding: 15px;
};

.header {
      display: flex;
      justify-content: space-between;
      justify-content: space-between;
      margin-bottom: 15px;
    }

   .city {
      font-size: 20px;
      font-weight: bold;
      color: black;

    }

   .time {
      font-size: 14px;
      color: black;
      float: right;
    }

    /* 空气质量区域 */
   .aqi {
     
     
      /* float:right;
      overflow: hidden; */
      display: flex;
      /* float: right;
      margin-bottom: 15px; */
      justify-content: space-between;
      color: white;
    }
.apia{
   /* float: right; */
   /* background-color: #bada55; */
   
   margin-left: auto;
   padding: 5px 10px;
   border-radius: 15px;
}
    /* 天气状况和描述区域 */
   .condition {
      display: flex;
      align-items: center;
      justify-content: center;
     margin-bottom: 130px;
    }
    .tempDesc{
        margin-left: 10px;
    }
   .icon {
      width: 60px;
      height: 60px;
      margin-right: 10px;
    }

   .temp {
      font-size: 36px;
      font-weight: bold;
      
    }

   .desc {
      /* text-align: center; */
     
    }

    /* 风力和湿度区域 */
   .wind-humidity {
      display: flex;
      /* justify-content: space-between; */
      /* margin-top: 15px; */
      /* margin-bottom: 15px; */
      border-radius: 5px;
      
      align-items: flex-end; /* 让风向和湿度靠底部显示 */
      background-color: #dcdcdc;
      
      opacity: 0.8; 
    }
    .wind-humidity >span{
      color: black;
    }
   .wind{
    padding: 10px;
      
      width: 48%;
      text-align: center;
      margin-bottom: 0px;
      opacity: 0.5; 
      color: black;
   }
   .humidity {
     
      padding: 10px;
      
      width: 48%;
      text-align: center;
      margin-bottom: 0px;
     
    }
</style>
